<template>
  <div class="menu">
    <div
      class="menu-item"
      v-for="(item, index) in menuListL"
      :key="index"
      :class="{ active_menu_item: menuActive === index }"
      @click="onToggleMenu(item, index)"
    >
      <svg-icon
        :name="item.meta.iconName"
        style="width: 33px; height: 33px; margin-right: 13px"
      />
      <span>
        {{ item.meta.title }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Menu from "@/components/Menu/Menu.vue";
import svgIcon from "@/components/Svg/svg-icon.vue";
const route = useRoute();
const router = useRouter();
const props = defineProps({
  menuListL: {
    type: Array,
    default: [],
  },
});
onMounted(()=>{
  console.log(route.path);

})
const menuActive = ref(0);
const onToggleMenu = (item, index) => {
  menuActive.value = index;
  console.log(item);
  router.push(item.path);
};

// 根据当前路由设置激活菜单项
function setActiveMenuBasedOnRoute(route) {
  const activeMenu = props.menuListL.findIndex(item => item.path === route.path);
  if (activeMenu !== -1) {
    menuActive.value = activeMenu;
  }
}

onMounted(() => {
  setActiveMenuBasedOnRoute(route);
});

</script>
<style scoped lang="scss">
.menu {
  width: 16%;

  .menu-item {
    color: rgba(255, 255, 255, 0.55);
    border-radius: 12px 0px 0px 12px;
    cursor: pointer;
    font-style: normal;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
    padding: 22px 27px 22px 27px;
    margin: 20px 0;
  }

  .active_menu_item {
    color: #fff;
    background: radial-gradient(
        68.36% 69.42% at 1.35% 5.14%,
        rgba(0, 255, 240, 0.49) 0%,
        rgba(0, 255, 240, 0) 100%
      ),
      radial-gradient(
        90.82% 51.47% at 0% 50%,
        rgba(86, 255, 214, 0.17) 0%,
        rgba(20, 20, 20, 0.36) 100%
      );
  }
}
</style>
